
import {size, formItemLayout, getImages, getFileList } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
import Uploads from '../Uploads';
const TextArea = Input.TextArea;
export interface AdvertSettingEditProps extends FormComponentProps {
    visible: boolean,
    advertSetting?: api.SingleUserMallStoreSettingsVOAdvertSettingVO,
    onSave: (any) => void,
    onCancel: () => void,
}
class AdvertSettingEdit extends React.PureComponent<AdvertSettingEditProps, any>{
    constructor(props) {
        super(props);
    }


    state = {
        fileList: [],
        id: 0
    }

    componentDidMount() {
        const id = this.props.advertSetting && this.props.advertSetting.id;
        this.setState({id:id});
        const images = this.props.advertSetting && this.props.advertSetting.picture;
        this.setState({ fileList: getFileList(images) });
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                form['id'] = this.state.id;
                form['picture'] = getImages(this.state.fileList);
                this.props.onSave(form);
            }
        });
    }

    cancel = () => {
        this.props.onCancel();
    }

    imageChange = (fileList) => {
        this.setState({ fileList });
    }
    
    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { advertSetting } = this.props;
        const { fileList } = this.state;
        return (
            <Modal
                title='APP启动广告'
                visible={this.props.visible}
                onOk={this.ok}
                onCancel={this.cancel}
                maskClosable={true}
            >
                <Form>
                    <Form.Item label="描述" {...formItemLayout}>
                        {getFieldDecorator('description', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入描述'
                                }
                            ],
                            initialValue: advertSetting && advertSetting.description
                        })(<Input size={size} 
                            placeholder="请输入描述" />)}
                    </Form.Item>
                </Form>
                <Form.Item label="广告图片" {...formItemLayout}>
                        {getFieldDecorator('picture', {
                            rules: [{
                                required: true,
                                message: '请上传广告图片'
                            }],
                            initialValue: advertSetting && advertSetting.picture
                        })
                            (<Uploads editable={this.props.visible} fileList={fileList} onChange={this.imageChange} />)}
                    </Form.Item>
                    <Form.Item label="广告链接" {...formItemLayout}>
                            {getFieldDecorator('url', {
                                initialValue: advertSetting && advertSetting.url
                            })(<TextArea
                                placeholder="请输入广告链接" />)}
                        </Form.Item>
            </Modal>)
    }
}

export default Form.create()(AdvertSettingEdit);